<template>
  <view class='productList'>
    <uv-notify ref="notify" message="success" type="success"></uv-notify>
    <view class="pageBody">
      <uv-swiper
          :list="[groupInfo.goods?(groupInfo.goods.goodsImg?groupInfo.goods.goodsImg:''):'']"
          keyName="image"
          height="200"
          showTitle
          indicator
          :radius="0"
          :title-style="{color:'red',textAlign: 'center'}"
          indicatorStyle="right: 20px"
          @change="e => swiperCurrent = e.current"
          circular>
        <template v-slot:indicator>
          <!--          <view class="indicator-num">-->
          <!--            <text class="indicator-num__text">-->
          <!--              <text style="margin-right: 5px">图片</text>-->
          <!--              1/1-->
          <!--            </text>-->
          <!--          </view>-->
        </template>
      </uv-swiper>
      <view class="group-time">
        <view class="group-time-info">
          <view class="left">
            <view>
              <view style="display: flex;align-items: center">
                <text style="margin-top: 10px">¥</text>
                <text class="activityPrice">{{ groupInfo.goods.activityPrice.toFixed(2) }}</text>

                <view class="groupMemberCount" v-if="groupInfo.goods.minNumber!=groupInfo.goods.maxNumber">
                  {{ groupInfo.goods.minNumber }} ～ {{ groupInfo.goods.maxNumber }} 件团
                </view>

                <view class="groupMemberCount" v-else>
                  {{ groupInfo.goods.minNumber }} 件团
                </view>

              </view>
              <view class="salesPrice">
                <text>原价：{{ groupInfo.goods.salesPrice.toFixed(2) }}</text>
              </view>
            </view>

          </view>
          <view class="right">
            <view>距离结束仅剩</view>
            <view>
              <uvCountDown :time="groupInfo.countdown"/>
            </view>
          </view>
        </view>

        <view style="margin-top: 10px">
          <uv-line-progress activeColor="#5ac725" :percentage="((groupInfo.goods.saleNum/groupInfo.goods.maxNumber)*100).toFixed(2)"
                            :height="18"></uv-line-progress>
        </view>
      </view>
      <view class="group-info-name">
        跑腿任务：{{ groupInfo.goods.goodsName }}*{{ groupInfo.goods.skuName }}
      </view>

      <view class="goods-info">
        <view class="goods">
          <view class="goods-price">
            <view class="price" :style="{color:themConfig.theme.color}">
            </view>
            <view class="sales-num">拼团说明</view>
          </view>

          <view class="goods-content">
            <uv-text size="16" :text="groupInfo.activityRule"></uv-text>
          </view>
        </view>

        <uv-gap height="10" bgColor=""></uv-gap>
        <view class="market">
          <uv-cell-group>

            <uv-cell title="团名称"
                     :value="groupInfo.activityName" :border="false"/>

            <uv-cell title="配送时间"
                     :value="groupInfo.deliveryTimeSort" :border="false"/>

            <uv-cell title="发布身份"
                     :value="groupInfo.identityType==2?'用户':'跑手'" :border="false"/>

            <uv-cell title="是否自动接单" v-if="groupInfo.identityType===1"
                     :value="groupInfo.groupSuccessAutoTake?'是':'否'" :border="false"/>


            <uv-cell title="活动过期是否自动成团"
                     :value="groupInfo.finishAutoGroup?'是':'否'" :border="false"/>


            <!--            -1=待开使,0=活动中，1=活动结束，2=废弃-->
            <uv-cell title="状态"
                     :value="groupInfo.state===0?'活动中':'活动结束'" :border="false"/>


            <uv-cell title="任务地址"
                     :value="groupInfo.actionAddress||''" :border="false"/>

            <uv-cell title="跑腿费"
                     :value="groupInfo.goods.errandChargeAmount===0?'0.00':groupInfo.goods.errandChargeAmount" :border="false">
            </uv-cell>

            <uv-cell title="流程说明"
                     :border="false">
              <template v-slot:label>
                <view style="text-indent: 1em;color: #909399;margin: 3px 0">
                  <li>参团 --> 成团 --> 跑手任务 --> 订单完成</li>
                  <li>参团 --> 未成团 --> 退款</li>
                </view>
              </template>
            </uv-cell>


            <uv-cell title="创建时间"
                     :value="groupInfo.createTime" :border="false">
            </uv-cell>
          </uv-cell-group>
        </view>

        <uv-gap height="10" bgColor=""></uv-gap>
        <view class="goods-detail">
          <view class="goods-detail-title">
            <view>已参团用户</view>
            <view class="group-num">已成团数量:{{ groupInfo.goods.saleNum }}</view>
          </view>
          <uv-divider></uv-divider>
          <view class="goods-body">
            <view class="member-infos" v-for="(member,idx) in groupInfo.groupMember">
              <view class="member-info-name">
                <view>
                  <uv-avatar :icon="member.memberAvatar" fontSize="25"></uv-avatar>
                </view>
                <view style="margin-left: 10px">
                  {{ member.memberName }}
                </view>
              </view>
              <view class="order-info">
                <view>购买数量: {{ member.saleNum }}</view>
                <view>{{ member.createTime }}</view>
              </view>
            </view>
          </view>
        </view>

        <uv-gap height="10" bgColor=""></uv-gap>
        <view class="goods-detail">
          <view class="goods-detail-title">
            <view>拼团订单</view>
            <view class="group-num">订单数量:{{ order.ext.count }}</view>
          </view>
          <uv-divider></uv-divider>
          <view class="goods-body">
            <view v-if="order.list.length > 0" v-for="(item,index) in order.list">
              <OrderList :isLast="index===order.list.length-1" type="3" :datas="[item]">
                <template v-slot:operate>

                  <view class="operate">
                    <view class="btn">
                      <uv-button v-if="
                              (item.state === 101 && groupInfo.grouperId === userInfo.id)
                              || (item.identityType === 1 && item.state === 1 && groupInfo.grouperId === userInfo.id)
                             "
                                 @click="cancelOrder(item)" size="normal"
                                 type="info"
                                 text="取消不接单"></uv-button>
                    </view>
                    <view style="width: 1px"></view>
                    <view class="btn">
                      <uv-button v-if="
                              (item.state === 101 && groupInfo.grouperId === userInfo.id)
                              || (item.identityType === 1 && item.state === 1 && groupInfo.grouperId === userInfo.id)
                             "
                                 @click="acctOrder(item)" type="success" size="normal"
                                 text="接单"></uv-button>
                    </view>

                    <view class="btn">
                      <uv-button v-if="
                              (item.state === 2 && groupInfo.grouperId === userInfo.id)
                              || (item.identityType === 1 && item.state === 1 && groupInfo.grouperId === userInfo.id)
                             "
                                 @click="finishOrder(item)" type="success" size="normal"
                                 text="送达"></uv-button>
                    </view>
                  </view>
                </template>
              </OrderList>
            </view>
          </view>
        </view>


        <uv-gap height="90" bgColor=""></uv-gap>

      </view>
    </view>
    <FloatingBackHome/>
  </view>
</template>
<script>
import {mixins} from './index.js'
import uvCountDown from '@/components/school/group/uv-count-down.vue'
import OrderList from '@/components/school/orderList';

export default {
  components: {uvCountDown, OrderList},
  mixins: [mixins]
}
</script>
<style scoped lang="scss">
@import './index.scss';

::v-deep .sku-item .uv-button {
  //padding: 30px !important;
  height: auto !important;
}
</style>
